<template>
  <div class="song-list">
    <ul>
      <li class="song-item" v-for="(song,i) in songs" @click="selectItem(song,i)">
        <div class="rank" v-show="rank">
          <span :class="getRankCls(i)">{{getRankText(i)}}</span>
        </div>
        <div class="content">
          <h3 class="content-name">{{song.name}}</h3>
          <p class="content-info">{{getSongInfo(song)}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      songs: {type: Array, default: []},
      rank: {type: Boolean, default: false}
    },
    methods: {
      getRankCls (index) {
        if (index <= 2) {
          return `icon icon${index}`;
        } else {
          return 'text';
        }
      },
      getRankText (index) {
        if (index > 2) {
          return index + 1;
        }
      },
      getSongInfo (song) {
        return `${song.singer}.${song.album}`;
      },
      selectItem (song, index) {
        this.$emit('selectSong', song, index);
      }
    }
  };
</script>

<style lang="less" scoped="">
  @import "~common/css/variable.less";
  @import "~common/css/mixin.less";

  .song-item {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 64px;
    font-size: @font-size-medium;
    .rank {
      flex: 00 25px;
      width: 25px;
      margin-right: 30px;
      text-align: center;
      .icon {
        display: inline-block;
        width: 25px;
        height: 24px;
        background-size: 25px 24px;
        &.icon0 {
          .bg-image('first');
        }
        &.icon1 {
          .bg-image('second');
        }
        &.icon2 {
          .bg-image('third');
        }
      }
      .text {
        color: @color-theme;
        font-size: @font-size-large;
      }
    }
    .content {
      flex: 1;
      line-height: 20px;
      overflow: hidden;
      .content-name {
        .no-wrap;
        color: @color-text;
      }
      .content-info {
        .no-wrap;
        margin-top: 4px;
        color: @color-text-d;
      }
    }
  }
</style>
